<html>

<head>
  <title>快递信息</title>
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>物流信息</title>
  <link type="text/css" rel="stylesheet" href="./css/base.css">
  <link type="text/css" rel="stylesheet" href="./css/expressInfo.css">
</head>

<body>
  <div class="full-container">
    <!-- <div class="header clearfix">
      <div class="header-left float-l clearfix">
        <a class="back float-l">
          <img src="./img/back.png" alt="">        
        </a>
        <span class="float-l">物流信息</span>
      </div>
      <div class="header-right float-r">
        <a class="user">
          <img src="./img/user.png" alt="">
        </a>
      </div>
    </div> -->
    <div class="content">
      <div class="content-wrapper">

        <div class="notification-wrapper">
          <p>抱歉，暂无您的物流信息</p>
        </div>

        <div class="express-info clearfix">
          <div class="express-left float-l">
            <a class="identification-wrapper">
              <span class="identification receive">收</span>
            </a>
          </div>

          <div class="express-right float-r">
            <div class="express-right-wrapper">
              <div class="line-top clearfix">
                <div class="line-left float-l">
                  <span class="waybill-number">3915060155943</span>
                </div>
                <div class="line-right float-r">
                  <span class="waybill-company">顺丰</span>
                </div>
              </div>
              <div class="line-bottom clearfix">
                <div class="line-left float-l">
                  <span class="waybill-status">未签收</span>
                </div>
                <div class="line-right float-r">
                  <span class="update-time">2018/5/8 9:34:23</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="express-info clearfix">
          <div class="express-left float-l">
            <a class="identification-wrapper">
              <span class="identification send">寄</span>
            </a>
          </div>

          <div class="express-right float-r">
            <div class="express-right-wrapper">
              <div class="line-top clearfix">
                <div class="line-left float-l">
                  <span class="waybill-number">3915060155943</span>
                </div>
                <div class="line-right float-r">
                  <span class="waybill-company">顺丰</span>
                </div>
              </div>
              <div class="line-bottom clearfix">
                <div class="line-left float-l">
                  <span class="waybill-status">未签收</span>
                </div>
                <div class="line-right float-r">
                  <span class="update-time">2018/5/8 9:34:23</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="express-info clearfix">
          <div class="express-left float-l">
            <a class="identification-wrapper">
              <span class="identification receive">收</span>
            </a>
          </div>

          <div class="express-right float-r">
            <div class="express-right-wrapper">
              <div class="line-top clearfix">
                <div class="line-left float-l">
                  <span class="waybill-number">3915060155943</span>
                </div>
                <div class="line-right float-r">
                  <span class="waybill-company">顺丰</span>
                </div>
              </div>
              <div class="line-bottom clearfix">
                <div class="line-left float-l">
                  <span class="waybill-status">未签收</span>
                </div>
                <div class="line-right float-r">
                  <span class="update-time">2018/5/8 9:34:23</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="express-info clearfix">
          <div class="express-left float-l">
            <a class="identification-wrapper">
              <span class="identification send">寄</span>
            </a>
          </div>

          <div class="express-right float-r">
            <div class="express-right-wrapper">
              <div class="line-top clearfix">
                <div class="line-left float-l">
                  <span class="waybill-number">3915060155943</span>
                </div>
                <div class="line-right float-r">
                  <span class="waybill-company">顺丰</span>
                </div>
              </div>
              <div class="line-bottom clearfix">
                <div class="line-left float-l">
                  <span class="waybill-status">未签收</span>
                </div>
                <div class="line-right float-r">
                  <span class="update-time">2018/5/8 9:34:23</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="express-info clearfix">
          <div class="express-left float-l">
            <a class="identification-wrapper">
              <span class="identification receive">收</span>
            </a>
          </div>

          <div class="express-right float-r">
            <div class="express-right-wrapper">
              <div class="line-top clearfix">
                <div class="line-left float-l">
                  <span class="waybill-number">3915060155943</span>
                </div>
                <div class="line-right float-r">
                  <span class="waybill-company">顺丰</span>
                </div>
              </div>
              <div class="line-bottom clearfix">
                <div class="line-left float-l">
                  <span class="waybill-status">未签收</span>
                </div>
                <div class="line-right float-r">
                  <span class="update-time">2018/5/8 9:34:23</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="express-info clearfix">
          <div class="express-left float-l">
            <a class="identification-wrapper">
              <span class="identification send">寄</span>
            </a>
          </div>

          <div class="express-right float-r">
            <div class="express-right-wrapper">
              <div class="line-top clearfix">
                <div class="line-left float-l">
                  <span class="waybill-number">3915060155943</span>
                </div>
                <div class="line-right float-r">
                  <span class="waybill-company">顺丰</span>
                </div>
              </div>
              <div class="line-bottom clearfix">
                <div class="line-left float-l">
                  <span class="waybill-status">未签收</span>
                </div>
                <div class="line-right float-r">
                  <span class="update-time">2018/5/8 9:34:23</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="express-info clearfix">
          <div class="express-left float-l">
            <a class="identification-wrapper">
              <span class="identification receive">收</span>
            </a>
          </div>

          <div class="express-right float-r">
            <div class="express-right-wrapper">
              <div class="line-top clearfix">
                <div class="line-left float-l">
                  <span class="waybill-number">3915060155943</span>
                </div>
                <div class="line-right float-r">
                  <span class="waybill-company">顺丰</span>
                </div>
              </div>
              <div class="line-bottom clearfix">
                <div class="line-left float-l">
                  <span class="waybill-status">未签收</span>
                </div>
                <div class="line-right float-r">
                  <span class="update-time">2018/5/8 9:34:23</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="express-info clearfix">
          <div class="express-left float-l">
            <a class="identification-wrapper">
              <span class="identification send">寄</span>
            </a>
          </div>

          <div class="express-right float-r">
            <div class="express-right-wrapper">
              <div class="line-top clearfix">
                <div class="line-left float-l">
                  <span class="waybill-number">3915060155943</span>
                </div>
                <div class="line-right float-r">
                  <span class="waybill-company">顺丰</span>
                </div>
              </div>
              <div class="line-bottom clearfix">
                <div class="line-left float-l">
                  <span class="waybill-status">未签收</span>
                </div>
                <div class="line-right float-r">
                  <span class="update-time">2018/5/8 9:34:23</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="express-info clearfix">
          <div class="express-left float-l">
            <a class="identification-wrapper">
              <span class="identification receive">收</span>
            </a>
          </div>

          <div class="express-right float-r">
            <div class="express-right-wrapper">
              <div class="line-top clearfix">
                <div class="line-left float-l">
                  <span class="waybill-number">3915060155943</span>
                </div>
                <div class="line-right float-r">
                  <span class="waybill-company">顺丰</span>
                </div>
              </div>
              <div class="line-bottom clearfix">
                <div class="line-left float-l">
                  <span class="waybill-status">未签收</span>
                </div>
                <div class="line-right float-r">
                  <span class="update-time">2018/5/8 9:34:23</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="express-info clearfix">
          <div class="express-left float-l">
            <a class="identification-wrapper">
              <span class="identification send">寄</span>
            </a>
          </div>

          <div class="express-right float-r">
            <div class="express-right-wrapper">
              <div class="line-top clearfix">
                <div class="line-left float-l">
                  <span class="waybill-number">3915060155943</span>
                </div>
                <div class="line-right float-r">
                  <span class="waybill-company">顺丰</span>
                </div>
              </div>
              <div class="line-bottom clearfix">
                <div class="line-left float-l">
                  <span class="waybill-status">未签收</span>
                </div>
                <div class="line-right float-r">
                  <span class="update-time">2018/5/8 9:34:23</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script>
  var contentWrapper = document.getElementsByClassName('content-wrapper')[0],
      // 模拟运单
      waybill = {
        type: 0,
        number: 123465,
        company: '申通',
        status: '未签收',
        updateTime: '2018/5/9 16:05:46'
      },
      receivedWaybill = `<div class="express-info clearfix">
          <div class="express-left float-l">
            <a class="identification-wrapper">
              <span class="identification receive">收</span>
            </a>
          </div>

          <div class="express-right float-r">
            <div class="express-right-wrapper">
              <div class="line-top clearfix">
                <div class="line-left float-l">
                  <span class="waybill-number">${waybill.number}</span>
                </div>
                <div class="line-right float-r">
                  <span class="waybill-company">${waybill.company}</span>
                </div>
              </div>
              <div class="line-bottom clearfix">
                <div class="line-left float-l">
                  <span class="waybill-status">${waybill.status}</span>
                </div>
                <div class="line-right float-r">
                  <span class="update-time">${waybill.updateTime}</span>
                </div>
              </div>
            </div>
          </div>
        </div>`,
      sendWaybill = `<div class="express-info clearfix">
          <div class="express-left float-l">
            <a class="identification-wrapper">
              <span class="identification send">寄</span>
            </a>
          </div>

          <div class="express-right float-r">
            <div class="express-right-wrapper">
              <div class="line-top clearfix">
                <div class="line-left float-l">
                  <span class="waybill-number">${waybill.number}</span>
                </div>
                <div class="line-right float-r">
                  <span class="waybill-company">${waybill.company}</span>
                </div>
              </div>
              <div class="line-bottom clearfix">
                <div class="line-left float-l">
                  <span class="waybill-status">${waybill.status}</span>
                </div>
                <div class="line-right float-r">
                  <span class="update-time">${waybill.updateTime}</span>
                </div>
              </div>
            </div>
          </div>
        </div>`;

  // 获取数据

  var child = document.createElement('div')
  if (waybill.type == 0){
    // 判断数据为收件
    contentWrapper.appendChild(child);
    child.outerHTML = receivedWaybill
  } else {
    // 判断数据为寄件
    contentWrapper.appendChild(child);
    child.outerHTML = sendWaybill
  }
</script>